<!--
 * @Description: 商品管理
 * @Author: 阳婷
 * @Date: 2021-03-22 10:24:42
 * @LastEditTime: 2023-06-09 09:44:23
 * @LastEditors: 阳婷
-->
<template>
    <div class='box-index'>
        <div class='filter-container'>
            <el-input class="input-width fliterMargin" size="small" placeholder="货柜编号" v-model="keyword" clearable
                @change="getData">
            </el-input>
            <el-button type="primary" class="filterBtn" size="small" @click='getData'>查询</el-button>
            <el-button type="success" class="filterBtn" size="small" @click='setMap'>地图设置</el-button>
            <div class="mapName" v-show="mapName"><text class="mapNameTip">机器人当前地图 -</text> {{mapName}} </div>
        </div>
        <div class="role-content">
            <table-header @click='Eventclick' :hideBtn="hideBtn">
                <el-button type="text" icon="fa fa-plus" @click='addData'> 添加</el-button>
            </table-header>
        </div>
        <el-table border style="width: 100%" :data="tableData" @sort-change='getsort' @row-click='rowclick'
            @selection-change="handleSelectionChange" ref="tables" highlight-current-row :row-key="getRowKeys">
            <el-table-column type="selection" :reserve-selection=true></el-table-column>
            <el-table-column prop="shelf_code" label="货柜编号"></el-table-column>
            <el-table-column prop="status_name" label="货柜状态"></el-table-column>
            <el-table-column prop="mapName" label="货柜当前地图"></el-table-column>
            <el-table-column prop="location_name" label="货柜点位"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="text" @click="rowclick(scope.row)" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="rowShelfs(scope.row)">货柜</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @current-change="handleCurrentChange" :page-size='perPage' :current-page="current"
                :total="pagetotal" layout="total, prev, pager, next, jumper">
            </el-pagination>
            <asides v-model:show="show" v-if="show" v-model:header="header" v-model:Icon='icon' v-model:width="width">
                <detail v-model:row-data="rowData" v-model:locations="locations" v-model:mapName="mapName"></detail>
            </asides>
            <asides v-model:show="showShelf" v-if="showShelf" v-model:header="header" v-model:Icon='icon'
                v-model:width="width2">
                <sideInfo v-model:row-data="rowData"></sideInfo>
            </asides>
        </div>
        <el-dialog v-model="showLocation" title="地图设置" width="400px">
            <el-form ref="forms" :model="form" label-width="120px" style="margin-top: 30px;">
                <el-form-item label="机器人当前地图">
                    <div class="rightInfo">{{mapName}}</div>
                </el-form-item>
                <el-form-item label="货柜当前地图">
                    <div class="rightInfo">{{shelfMapName}}</div>
                </el-form-item>
                <el-form-item label="出货点" v-show="mapName==shelfMapName">
                    <el-select style="width: 200px; " v-model="origin.originPoint" placeholder="出货点">
                        <el-option v-for="item in locations" :key="item.location_name" :label="item.location_name"
                            :value="item.location_name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" style="text-align: center;">
                <div class="mapDiff" v-show="mapName!=shelfMapName">机器人当前地图和货柜当前地图不一致，请更新地图并重新设置点位</div>
                <el-button type="primary" @click="saveOriginLocation" v-if="mapName==shelfMapName">保存</el-button>
                <el-button class="updateMap" type="success" @click="updateMap" v-else>更新地图</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        ref,
        reactive,
        toRefs,
        defineComponent,
        onMounted,
        getCurrentInstance
    } from "vue";
    import TableHeader from "./../../components/TableHeader/index.vue"
    import Asides from "@/components/Asides"
    import detail from './detail.vue'
    import sideInfo from './sideInfo.vue'
    export default defineComponent({
        setup(props) {
            const datas = reactive({
                hideBtn: {
                    Enable: false,
                    Disable: false,
                    delete: true
                },
                pagetotal: 3, //总条数
                page: 1, //当前页
                perPage: 15, //每页多少条
                current: 1,
                sort: '',
                keyword: '',
                tableData: [],
                chooseGroup: [],
                rowData: {},
                header: "",
                show: false,
                showShelf: false,
                icon: "el-icon-menu",
                width: "560px",
                width2: "100%",
                mapName: '',//机器人当前使用地图名称
                shelfMapName: '',//货柜绑定的地图
                locations: [],
                showLocation: false,
                origin: {
                    id: "",
                    originPoint: "" //出货点
                }
            })
            const { proxy } = getCurrentInstance();
            const tables = ref(null);
            onMounted(() => {
                getData(1)
                getLocation()
                setTimeout(() => {
                    getOriginLocation()
                }, 100)
            });
            const getRowKeys = (row) => {
                return row.id
            }
            const getData = (val) => {
                datas.show ? datas.show = false : ""
                datas.showShelf ? datas.showShelf = false : ""
                if (val == 1) {
                    datas.chooseGroup = []
                    tables.value.clearSelection();
                    datas.page = 1
                }
                proxy.$ajax('get', '/api/shelfs', {
                    keyword: datas.keyword,
                    page: datas.page,
                    perPage: datas.perPage
                }, (data) => {
                    datas.tableData = data.data.data
                    datas.current = data.data.pageNum
                    datas.perPage = parseFloat(data.data.pageSize)
                    datas.pagetotal = data.data.total
                })
            };
            // const setLocation = () => {
            //     datas.showLocation = true
            // }
            const setMap = () => {
                datas.showLocation = true
            }
            const updateMap = () => {
                proxy.$ajax("get", "/api/shelfs/updateMap", {
                    mapName: datas.mapName
                }, data => {
                    if (data.code == 200) {
                        datas.shelfMapName = datas.mapName
                        getLocation()
                    }
                    proxy.$message({
                        type: "warning",
                        message: data.msg
                    })
                })
            }
            const getOriginLocation = () => {
                proxy.$ajax("get", "/api/origin", {}, data => {
                    if (data.code == 200) {
                        data.data.length > 0 ? datas.origin = data.data[0] : ""
                    } else {
                        proxy.$message({
                            type: "warning",
                            message: data.msg
                        })
                    }

                })
            }
            const saveOriginLocation = () => {
                proxy.$ajax("post", "/api/origin", {
                    id: datas.origin.id,
                    originPoint: datas.origin.originPoint
                }, data => {
                    if (data.code == 200) {
                        datas.showLocation = false
                    }
                    proxy.$message({
                        type: "success",
                        message: data.msg
                    })

                })
            }
            const getLocation = () => {
                proxy.$ajax("get", "/api/robot/getLocations", {}, data => {
                    if (data.code == 200) {
                        datas.mapName = data.data.mapName
                        datas.locations = data.data.locations
                        datas.shelfMapName = data.data.oldMapName
                        if (datas.mapName!= datas.shelfMapName) {
                            proxy.$message({
                                type: "warning",
                                message: "机器人当前地图和货柜当前地图不一致，请在地图设置中更新地图并重新设置点位"
                            })
                            setTimeout(() => {
                                datas.showLocation = true
                            }, 2000)

                        }
                    } else {
                        proxy.$message({
                            type: "warning",
                            message: data.msg
                        })
                    }
                })
            }
            const Eventclick = (val) => {
                if (val == "删除") {
                    deletes()
                }
            };
            const rowclick = (val, e) => {
                if (e && e.no == 6) {

                } else {
                    datas.show = true
                    datas.showShelf ? datas.showShelf = false : ""
                    datas.header = val.shelf_code
                    datas.rowData = val
                }
            };
            const rowShelfs = (val) => {
                datas.showShelf = true
                datas.show ? datas.show = false : ""
                datas.header = val.shelf_code
                datas.rowData = val
            };
            const addData = () => {
                datas.show = true
                datas.rowData = {}
                datas.header = "添加"
            };
            const deletes = () => {
                proxy.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        proxy.$ajax(
                            "delete", "/api/shelfs", {
                            id: datas.chooseGroup
                        },
                            data => {
                                proxy.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                tables.value.clearSelection();
                                datas.chooseGroup = []
                                getData()
                            }
                        );
                    })
                    .catch(() => {
                        proxy.$message({
                            type: "info",
                            message: "已取消删除"
                        })
                    })
            };
            const getsort = (val) => {
                if (val && val.order == 'ascending') {
                    datas.sort = val.prop
                } else if (val && val.order == 'descending') {
                    datas.sort = '-' + val.prop
                }
            };
            const handleSelectionChange = (val) => {
                datas.chooseGroup = []
                val.forEach(el => {
                    datas.chooseGroup.push(el.id)
                })
            };
            const handleCurrentChange = (val) => {
                datas.page = val
                getData()
            }

            return { ...toRefs(datas), tables, getData, Eventclick, rowclick, rowShelfs, addData, getsort, getRowKeys, handleSelectionChange, handleCurrentChange, setMap, updateMap, saveOriginLocation }
        },
        components: {
            TableHeader,
            Asides,
            detail,
            sideInfo
        }
    })
</script>
<style scoped>
    .mapName {
        color: #19c720;
        font-size: 20px;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .mapNameTip {
        color: #666;
    }

    .rightInfo {
        width: 200px;
        height: 40px;
        font-size: 18px;
        padding-left: 10px;
        background-color: #f0f0f0;
    }

    .mapDiff {
        color: #F56C6C;
        font-size: 12px;
        margin-bottom: 5px;
    }
</style>